<template>
  <div class="page">
    <!-- navbar -->
    <div style="height: 44px;display: flex;align-items: center;justify-content: space-between;padding: 0 12px;">
      <i
        class="Icon"
        style="width: 44px;height: 44px;line-height: 44px;font-size: 20px;"
        @click="backHandle()"
      >arrow_back_ios_new</i>
    </div>
    <!-- body -->
    <div class="body">
      <div style="font-size: 26px;">我的订单</div>

      <!-- order -->
      <div style="overflow-y: auto;flex: 1;padding-bottom: 12px;">
        <div
          v-for="(item,idx) in list"
          :key="idx"
          @click="viewHandle()"
        >
          <div style="padding-top: 12px;">
            <div style="background-color: #FFFFFF;border: 1px solid #EBEBEB;">
              <!-- item -->
              <div style="display: flex;flex-direction: row;background-color: #FFFFFF;max-height: 160px;overflow: hidden;">
                <van-image
                  :src="item.img"
                  style="width: 200px;"
                  fit="cover"
                >
                </van-image>
                <div style="padding: 12px;flex: 1;justify-content: space-around;display: flex;flex-direction: column;align-items: flex-end;">
                  <div style="font-size: 16px;">堂食</div>
                  <div style="height: 20px;"></div>
                  <div style="font-size: 14px;">2022-02-02</div>
                  <div style="font-size: 14px;">13-30 pm</div>
                  <div style="font-size: 14px;">$13.00</div>
                  <div style="font-size: 14px;">已完成</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  mounted() {},
  data() {
    return {
      statusNames: ["Wait pay", "Prepare", "During the meal", "Done", "Cancel"],
      list: [
        {
          orderId: "202201021800",
          time: "2022-02-03 16:33",
          price: "98.00",
          status: "0", //0 wait pay  1 prepare  2 eating 3 done 4 cancel

          img: "https://img.zcool.cn/community/01272858d8b7c8a801219c77827c87.jpg@1280w_1l_2o_100sh.jpg",
        },
        {
          orderId: "202201021800",
          time: "2022-02-03 16:33",
          price: "98.00",
          status: "2", //0 wait pay  1 prepare  2 eating 3 done 4 cancel
          img: "https://img.zcool.cn/community/0129a95c3337a0a80121df90bfc61c.jpg@1280w_1l_2o_100sh.jpg",
        },
      ],
    };
  },
  methods: {
    backHandle() {
      this.$router.replace({
        path: "/",
      });
    },
    viewHandle() {
      this.$router.push({
        path: "/orderdetail",
      });
    },
  },
};
</script>


<style scoped>
.page {
  height: 100%;
  overflow-y: auto;
  background-color: #ffffff;
}

.body {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.search {
  display: flex;
  align-items: center;
  border: 1px solid #ebebeb;
  background-color: #ffffff;
  height: 35px;
  overflow: hidden;
}
</style>